// 分页
//发送ajax
ajax({
	 url: "./getproduct.php",
	dataType: "json",
}).then(res => {
	// console.log(res)
	newLi(res, 0, 16, ulEle);
})
// 渲染函数
let ulEle = document.querySelector(".product_ul");
let pageEle = document.querySelector(".page");
// console.log(ulEle);
// console.log(pageEle);
function renderDom(cartData) {
	ulEle.innerHTML = "";
	carData.forEach(item => {
		let li = document.createElement("li");
		li.innerHTML=`<a class="product_a" href="pruductxq.html?id=${item.id}" target="_blank">
					<h3>${item.goodsname}</h3>
					<img src="${item.goodsimg}" alt="">
					<p>${item.goodstype}</p>
					<a class="product_aa" href="pruductxq.html?id=${item.id}">
					￥${item.goodsprice}
					</a>
					</a>`
		ulEle.appendChild(li);
	})
};
// 分页
function newLi(obj, a, b, div) {
	//每页数量
	let perPag = 16;
	//计算多少页
	let totalP = Math.ceil(obj.length / perPag);
	for (i = 1; i <= totalP; i++) {
		let p = document.createElement("a")
		p.classList.add("aele")
		p.innerHTML = i;
		pageEle.appendChild(p);
		// 点击每个aele背景颜色变动
		// $(function(){
		// 	$(".aele").click(function(){
		// 		// 当前元素背景颜色变红
		// 		$(this).css("color","red");
		// 		// 其余兄弟元素背景不要
		// 		$(this).siblings(".aele")css("color","");

		// 	})
		// })
		
	}
	
	
	let aEle = document.querySelectorAll(".aele");
	fnn(0, obj, div)
	aEle.forEach(function(item, key) {
		item.onclick = function() {
			console.log(item);
			div.innerHTML = "";
			fnn(key, obj, div)
			//每次点击回到商品区顶部
			// $("html").animate({
			// 	scrollTop: 0
			// }, 0);
		}
	})
};

// 分页函数
function fnn(x, obj, div) {
	let xx = x * 16 + 16;
	if (xx > obj.length) {
		xx = obj.length;
	}
	for (let j = x * 16; j < xx; j++) {
		let li = document.createElement("li")
  		li.innerHTML=`
  						<a class="product_a" href="pruductxq.html?id=${obj[j].id}" target="_blank">
  					 	<h3>${obj[j].goodsname}</h3>
  					 	<img src="${obj[j].goodsimg}" alt="">
						<p>${obj[j].goodstype}</p>
  					 	<a class="product_aa" href="pruductxq.html?id=${obj[j].id}">
  					 		￥${obj[j].goodsprice}
  					 	</a>
  					 </a>`
		div.appendChild(li)
	}
};